<template>
    <div class="content">
        <div class="xuanXiang">
            请设置人数
            <button @click="selectNum(num+1)" v-for="num in 5" :key="num">{{num+1}}人</button>
        </div>

        <div class="playerBox">
            <div class="box" v-for="player in this.playerNum" :key="player">

                <div class="dice" v-for="index in 5" :key="index">
                    <div class="dice-row">
                        <span class="dots-hide"
                              :class="{'dots':playerPoints[player-1][index-1]==2 ||playerPoints[player-1][index-1]==3 ||playerPoints[player-1][index-1]==4 ||playerPoints[player-1][index-1]==5 ||playerPoints[player-1][index-1]==6}"/>
                        <span class="dots-hide"/>
                        <span class="dots-hide"
                              :class="{'dots':playerPoints[player-1][index-1]==4 ||playerPoints[player-1][index-1]==5 ||playerPoints[player-1][index-1]==6}"/>
                    </div>
                    <div class="dice-row">
                        <span class="dots-hide" :class="{'dots':playerPoints[player-1][index-1]==6}"/>
                        <span class="dots-hide"
                              :class="{'dots':playerPoints[player-1][index-1]==1 ||playerPoints[player-1][index-1]==3 ||playerPoints[player-1][index-1]==5}"/>
                        <span class="dots-hide" :class="{'dots':playerPoints[player-1][index-1]==6}"/>
                    </div>
                    <div class="dice-row">
                        <span class="dots-hide"
                              :class="{'dots':playerPoints[player-1][index-1]==4 ||playerPoints[player-1][index-1]==5 ||playerPoints[player-1][index-1]==6}"/>
                        <span class="dots-hide"/>
                        <span class="dots-hide"
                              :class="{'dots':playerPoints[player-1][index-1]==2 ||playerPoints[player-1][index-1]==3 ||playerPoints[player-1][index-1]==4 ||playerPoints[player-1][index-1]==5 ||playerPoints[player-1][index-1]==6}"/>
                    </div>
                </div>
<!--                <Dice :current.sync="playerPoints[player-1][index-1]" v-for="index in 5" :key="index"/>-->
                <button class="shake" @click="shake(player)">摇一摇</button>
            </div>
        </div>
    </div>
</template>

<script>


    export default {
        name: 'HelloWorld',
        data() {
            return {
                playerNum: 2,
                dots: [],
                playerPoints: [
                    [1, 2, 2, 1, 1],
                    [1, 1, 1, 1, 1],
                    [1, 1, 2, 1, 1],
                    [1, 1, 1, 1, 1],
                    [1, 1, 1, 1, 1],
                    [1, 1, 1, 1, 1]
                ],//用来判断哪个筛子的点数
                player: [],
                playerScore: [],
                show:false,
            }
        },
        props: {},
        methods: {
            selectNum(num) {
                this.playerNum = num
                this.player=[]
                console.log(this.playerNum+"----------------------玩家人数！！！！")
                for (let i = 0; i < this.playerNum; i++) {
                    this.player.push({
                        isHave: false,//判断有没有牛
                        whatBow: 0,//判断牛几
                        isFiveBoom: false,
                        fiveBoom: 0,
                        isFiveSmallBow: false,
                        fiveSmallBow: 0,
                        fourBoom: 0,
                        isFourBoom: false,
                        points: 0})
                }
                console.log(this.player)
            },
            shake(player) {
                console.log(player)
                this.playerPoints[player - 1] = [Math.floor(Math.random() * 6 + 1), Math.floor(Math.random() * 6 + 1), Math.floor(Math.random() * 6 + 1), Math.floor(Math.random() * 6 + 1), Math.floor(Math.random() * 6 + 1)]
                console.log(this.playerPoints[player - 1])
                console.log(this.playerPoints)

                //判断有无牛
                if (this.playerPoints[player - 1][0] + this.playerPoints[player - 1][1] + this.playerPoints[player - 1][2] == 6 || this.playerPoints[player - 1][0] + this.playerPoints[player - 1][1] + this.playerPoints[player - 1][2] == 12 || this.playerPoints[player - 1][0] + this.playerPoints[player - 1][1] + this.playerPoints[player - 1][2] == 18) {
                    this.isHave = true
                    this.player[player-1] = [this.playerPoints[player - 1][3], this.playerPoints[player - 1][4]]
                    console.log("---------------1")
                } else if (this.playerPoints[player - 1][0] + this.playerPoints[player - 1][1] + this.playerPoints[player - 1][3] == 6 || this.playerPoints[player - 1][0] + this.playerPoints[player - 1][1] + this.playerPoints[player - 1][3] == 12 || this.playerPoints[player - 1][0] + this.playerPoints[player - 1][1] + this.playerPoints[player - 1][3] == 18) {
                    this.isHave = true
                    this.player[player-1] = [this.playerPoints[player - 1][2], this.playerPoints[player - 1][4]]
                    console.log("---------------2")
                } else if (this.playerPoints[player - 1][0] + this.playerPoints[player - 1][1] + this.playerPoints[player - 1][player - 1][4] == 6 || this.playerPoints[player - 1][0] + this.playerPoints[player - 1][1] + this.playerPoints[player - 1][4] == 12 || this.playerPoints[player - 1][0] + this.playerPoints[player - 1][1] + this.playerPoints[player - 1][4] == 18) {
                    this.isHave = true
                    this.player[player-1] = [this.playerPoints[player - 1][3], this.playerPoints[player - 1][2]]
                    console.log("---------------3")
                } else if (this.playerPoints[player - 1][0] + this.playerPoints[player - 1][3] + this.playerPoints[player - 1][4] == 6 || this.playerPoints[player - 1][0] + this.playerPoints[player - 1][3] + this.playerPoints[player - 1][4] == 12 || this.playerPoints[player - 1][0] + this.playerPoints[player - 1][3] + this.playerPoints[player - 1][4] == 18) {
                    this.isHave = true
                    this.player[player-1] = [this.playerPoints[player - 1][1], this.playerPoints[player - 1][2]]
                    console.log("---------------4")
                } else if (this.playerPoints[player - 1][0] + this.playerPoints[player - 1][3] + this.playerPoints[player - 1][2] == 6 || this.playerPoints[player - 1][0] + this.playerPoints[player - 1][3] + this.playerPoints[player - 1][2] == 12 || this.playerPoints[player - 1][0] + this.playerPoints[player - 1][3] + this.playerPoints[player - 1][2] == 18) {
                    this.isHave = true
                    this.player[player-1] = [this.playerPoints[player - 1][1], this.playerPoints[player - 1][4]]
                    console.log("---------------5")
                } else if (this.playerPoints[player - 1][0] + this.playerPoints[player - 1][2] + this.playerPoints[player - 1][4] == 6 || this.playerPoints[player - 1][0] + this.playerPoints[player - 1][2] + this.playerPoints[player - 1][4] == 12 || this.playerPoints[player - 1][0] + this.playerPoints[player - 1][2] + this.playerPoints[player - 1][4] == 18) {
                    this.isHave = true
                    this.player[player-1] = [this.playerPoints[player - 1][3], this.playerPoints[player - 1][1]]
                    console.log("---------------6")
                } else if (this.playerPoints[player - 1][1] + this.playerPoints[player - 1][2] + this.playerPoints[player - 1][4] == 6 || this.playerPoints[player - 1][1] + this.playerPoints[player - 1][2] + this.playerPoints[player - 1][4] == 12 || this.playerPoints[player - 1][1] + this.playerPoints[player - 1][2] + this.playerPoints[player - 1][4] == 18) {
                    this.isHave = true
                    this.player[player-1] = [this.playerPoints[player - 1][3], this.playerPoints[player - 1][0]]
                    console.log("---------------7")
                } else if (this.playerPoints[player - 1][2] + this.playerPoints[player - 1][3] + this.playerPoints[player - 1][4] == 6 || this.playerPoints[player - 1][2] + this.playerPoints[player - 1][3] + this.playerPoints[player - 1][4] == 12 || this.playerPoints[player - 1][2] + this.playerPoints[player - 1][3] + this.playerPoints[player - 1][4] == 18) {
                    this.isHave = true
                    this.player[player-1] = [this.playerPoints[player - 1][0], this.playerPoints[player - 1][1]]
                    console.log("---------------8")
                } else if (this.playerPoints[player - 1][1] + this.playerPoints[player - 1][2] + this.playerPoints[player - 1][3] == 6 || this.playerPoints[player - 1][1] + this.playerPoints[player - 1][2] + this.playerPoints[player - 1][3] == 12 || this.playerPoints[player - 1][1] + this.playerPoints[player - 1][2] + this.playerPoints[player - 1][3] == 18) {
                    this.isHave = true
                    this.player[player-1] = [this.playerPoints[player - 1][0], this.playerPoints[player - 1][4]]
                    console.log("---------------9")
                } else if (this.playerPoints[player - 1][1] + this.playerPoints[player - 1][3] + this.playerPoints[player - 1][4] == 6 || this.playerPoints[player - 1][1] + this.playerPoints[player - 1][3] + this.playerPoints[player - 1][4] == 12 || this.playerPoints[player - 1][1] + this.playerPoints[player - 1][3] + this.playerPoints[player - 1][4] == 18) {
                    this.isHave = true
                    this.player[player-1] = [this.playerPoints[player - 1][0], this.playerPoints[player - 1][2]]
                    console.log("---------------10")
                }
                this.player[player-1].whatBow = (this.player[player-1][0] + this.player[player-1][1]) % 6
                this.quChong(this.player[player-1], this.player[player-1], this.player[player-1])
            },
            quChong(arr, arr1, player) {
                console.log(arr + "-------------------------arr")
                for (var i = 0, len = arr.length; i < len; i++) {
                    // eslint-disable-next-line no-redeclare
                    for (var j = i + 1, len = arr.length; j < len; j++) {
                        if (arr[i] === arr[j]) {
                            player.fourBoom = arr[i]
                            arr.splice(j, 1);
                            j--;        // 每删除一个数j的值就减1
                            len--;      // j值减小时len也要相应减1（减少循环次数，节省性能）
                            // console.log(j,len)
                        }
                    }
                }
                if (arr.length == 1) {
                    player.fiveBoom = arr[0]
                } else if ((arr1[0] + arr1[1] + arr1[2] + arr1[3] + arr1[4]) == 6) {
                    player.isFiveSmallBow = true
                    player.fiveSmallBow = 1
                } else if (arr.length == 2) {
                    player.isFourBoom = true
                }
                if (player.isFourBoom != true) {
                    player.fourBoom = 0
                }
                console.log(arr + "-------------------------arr1111")
            },

        },
        components: {},

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .playerBox {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .xuanXiang {
        align-self: center;
    }

    .box {
        align-self: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        height: 400px;
        width: 400px;
        border-style: solid;
        border-width: 2px;
        border-radius: 50%;
        background-image: url("../../public/background.jpeg");
    }

    .shake {
        flex-basis: 100%;
        font-size: 30px;
        background-color: palegreen;
        border-style: solid;
        border-width: 3px;
    }

    .dice {
        flex-direction: column;
        align-self: center;
        height: 100px;
        width: 100px;
        border-style: solid;
        border-width: 2px;
        border-radius: 5px;
        display: flex;
        background-color: white;
        justify-content: space-around;
    }

    .dice-row {
        flex-direction: row;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .dots-hide.dots {
        height: 25px;
        width: 25px;
        border-radius: 50%;
        background-color: black;
        align-self: center;
    }

    .dots-hide {
        height: 25px;
        width: 25px;
        border-radius: 50%;
        background-color: white;
        align-self: center;
    }


</style>
